import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Text,
  ScrollView,
  TextInput,
  Button
} from 'react-native'

import NavBar from '../../../../../../components/PublicHeader';

export default class verifyNumberBank extends Component {
  constructor(props) {
    super(props)
    this.state = {
      buttonaddCards: true,
      // 手机验证数据
      verifyNumberBank:
      {
        // 手机号
        phoneNumder: "124756345767",
        // 手机验证码
        numder: "123456",
      },
    };
  }

  componentDidMount = () => {

  }


  onChangeText = (textInput) => {
    if (textInput == 123456) {
      this.setState({ buttonaddCards: false })
    }
  }


  render() {
    const {
      verifyNumberBank,
      buttonaddCards
    } = this.state
    {/* 手机验证 */ }
    const BankCardDetailsDisplay =
      <>
        <View style={styles.bankCardDetails}>
          <View style={styles.item}>
            <Text style={styles.itemTitle}>手机号</Text>
            <Text style={styles.phoneNumderText}>
              {verifyNumberBank.phoneNumder}
            </Text>
          </View>
          <View style={styles.bankCardDetails}>
            <Text style={styles.itemTitle}>验证码</Text>
            <TextInput
              placeholder='请输入验证码'
              style={styles.addBankCardsInput}
              onChangeText={textInput =>
                this.onChangeText(textInput)}
            />
            <Text style={styles.bankDisplayBtn}>获取验证码</Text>
          </View>
        </View>
      </>
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
        />
        <ScrollView>
          <View style={styles.padlr}>
            {/* 提示语 */}
            <View style={styles.textPrompt}>
              <Text style={styles.textPromptTitle}>
                验证银行预留手机号
              </Text>
            </View>
            <View>
              <View style={styles.addCardsInputBox}>
                {/* 手机验证区 */}
                {BankCardDetailsDisplay}
              </View>
              <Button
                title="下一步"
                style={styles.buttonaddCards}
                disabled={buttonaddCards}
                onPress={() => {
                  this.props.navigation.push('addComplete')
                }
                }
              />
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlrWarper: {
    backgroundColor: "#fff",
    flex: 1,
  },
  padlr: {
    paddingLeft: 25,
    paddingRight: 25,
    paddingTop: 10,
  },
  textPrompt: {
    flexDirection: "column",
    alignItems: "center",
    marginBottom: 50
  },
  bankDisplayBtn: {
    width: 80,
    height: 30,
    fontSize: 12,
    borderRadius: 4,
    color: "#fff",
    textAlign: "center",
    lineHeight: 30,
    backgroundColor: "#1890FF"
  },
  textPromptTitle: {
    color: "#333",
    fontSize: 20,
    marginBottom: 10
  },
  phoneNumderText: {
    paddingLeft: 16
  },
  addCardsInputBox: {
    marginBottom: 20,
    marginTop: 30
  },
  addBankCardsInput: {
    width: 150,
    height: 40,
    fontSize: 15,
    borderWidth: 0,
  },
  bankCardDetails: {
    width: "100%",
    marginTop: 10,
    borderWidth: 1,
    borderColor: "#E2E2E2",
    borderRadius: 6,
  },
  item: {
    height: 40,
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#E2E2E2",
    flexDirection: "row",
    alignItems: "center"
  },
  bankCardDetails: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingLeft: 15,
    paddingRight: 15
  },
  itemTitle: {
    marginRight: 30,
    color: "#333",
    fontSize: 15
  },


})